﻿
<div class="sliderWrapper container">
    <div id="slider" class="flexslider sixteen columns">
        <ul class="slides">
            <li><a href="our-menu/index.html">
                <img src="~/Content/themes/coffeeshop/images/files/2013/02/slider2.jpg" alt="WELCOME TO COFFEE SHOP" /></a><div class="slidesDescription"><a href="our-menu/index.html">
                    <h2>WELCOME TO COFFEE SHOP</h2>
                </a><span class="flex-caption-decription">A Powerful WordPress Theme For Restaurant & Bistro</span> </div>
            </li>
            <li><a href="our-menu/index.html">
                <img src="~/Content/themes/coffeeshop/images/files/2013/02/slider7.jpg" alt="EASILY CUSTOMIZABLE" /></a><div class="slidesDescription"><a href="our-menu/index.html">
                    <h2>EASILY CUSTOMIZABLE</h2>
                </a><span class="flex-caption-decription">Create The Website You Need</span> </div>
            </li>
            <li><a href="our-menu/index.html">
                <img src="~/Content/themes/coffeeshop/images/files/2013/02/slider3.jpg" alt="POWERED BY FLEXSLIDER 2" /></a><div class="slidesDescription"><a href="our-menu/index.html">
                    <h2>POWERED BY FLEXSLIDER 2</h2>
                </a><span class="flex-caption-decription">Responsive On Any Device</span> </div>
            </li>
            <li><a href="our-menu/index.html">
                <img src="~/Content/themes/coffeeshop/images/files/2013/02/sliderpizza.jpg" alt="DIFFERENT CUSTOM POSTS" /></a><div class="slidesDescription"><a href="our-menu/index.html">
                    <h2>DIFFERENT CUSTOM POSTS</h2>
                </a><span class="flex-caption-decription">To Help You Organize Your Content</span> </div>
            </li>
        </ul>
        <script type="text/javascript">
            jQuery(window).load(function () {
                jQuery('#carousel').flexslider({
                    animation: "slide",
                    controlNav: false,
                    animationLoop: false,
                    slideshow: false,
                    itemWidth: 187,
                    itemMargin: 0,
                    asNavFor: '#slider'
                });
                jQuery('#slider').flexslider({
                    animation: "slide",
                    controlNav: false,
                    animationLoop: true,
                    slideshow: true,                //Boolean: Animate slider automatically
                    slideshowSpeed: 4000,
                    sync: "#carousel",
                    start: function (slider) {
                        jQuery('body').removeClass('loading');
                    }
                });
            });
        </script>
    </div>
</div>

<div class="carouselWrapper">
    <div class="container">
        <div class="sixteen columns">
            <div id="carousel" class="flexslider">
                <ul class="slides">
                    <li class="carouselItem">
                        <img src="~/Content/themes/coffeeshop/images/files/2013/02/slider2.jpg" alt="WELCOME TO COFFEE SHOP" /><div class="thumbDescription">
                            <h3>WELCOME TO COFFEE SHOP</h3>
                            <p>Maecenas elementum imperdiet laoreet. Vivamus non nisl quis magna imperdiet aliquet.</p>
                        </div>
                    </li>
                    <li class="carouselItem">
                        <img src="~/Content/themes/coffeeshop/images/files/2013/02/slider7.jpg" alt="EASILY CUSTOMIZABLE" /><div class="thumbDescription">
                            <h3>EASILY CUSTOMIZABLE</h3>
                            <p>Sed vulputate mollis placerat.  Praesent ac quam leo, ut porta  mi. Nam convallis malesuada.</p>
                        </div>
                    </li>
                    <li class="carouselItem">
                        <img src="~/Content/themes/coffeeshop/images/files/2013/02/slider3.jpg" alt="POWERED BY FLEXSLIDER 2" /><div class="thumbDescription">
                            <h3>POWERED BY FLEXSLIDER 2</h3>
                            <p>Vestibulum et felis libero. Donec sapien urna, egestas quis luctus at, condimentum ac dolor. </p>
                        </div>
                    </li>
                    <li class="carouselItem">
                        <img src="~/Content/themes/coffeeshop/images/files/2013/02/sliderpizza.jpg" alt="DIFFERENT CUSTOM POSTS" /><div class="thumbDescription">
                            <h3>WELCOME TO COFFEE SHOP</h3>
                            <p>Sed vulputate mollis placerat.  Praesent ac quam leo, ut porta  mi. Nam convallis malesuada.</p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>